<template>
    <div class="title">
        <div>订单提交成功,请尽快付款! 订单号:{{ msg?.order_id
        }}</div>
        <div style="color:red">应付金额{{ msg?.total_fee }}元</div>
    </div>
    <div class="pay">
        <div class="top">
            <div class="logo" style="font-size:30px">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wechat_pay"></use>
                </svg>
                <b>微信支付</b>
            </div>
            <div class="erweima">
                <b>请使用微信扫码支付</b>
                <br>
                <div v-loading="loading"><img :src="qrUrl" alt="" style="height: 200px;width: 200px;"></div>
                <div class="small">
                    <svg class="icon a" aria-hidden="true" style="font-size:40px;vertical-align: middle;">
                        <use xlink:href="#icon-weixin1"></use>
                    </svg>


                    <div class="b">
                        <span>请使用微信扫一扫</span>
                        <br>
                        <span>扫描二维码支付</span>
                    </div>
                </div>
            </div>
            <div class="iphon">
                <img src="../../../../iphon.png" alt="" style="height: 300px;width: 250px;">

            </div>
        </div>
        <el-descriptions title="订单信息">
            <el-descriptions-item label="购买用户">{{ msg?.user_nickname }}</el-descriptions-item>
            <el-descriptions-item label="用户手机号">{{ msg?.user_phone }}</el-descriptions-item>
            <el-descriptions-item label="商品介绍">{{ msg?.orderDetail[0].description }}</el-descriptions-item>
            <el-descriptions-item label="购买物品">{{ msg?.orderDetail[0].productName }}</el-descriptions-item>
            <el-descriptions-item label="创建时间">{{ msg?.create_time }}</el-descriptions-item>
        </el-descriptions>
    </div>
</template>
<script setup>
import { useRoute, useRouter } from 'vue-router'
import { ref, onUnmounted } from 'vue'
import * as api from '@/api/pay.js'
import { ElMessage, ElLoading } from 'element-plus'
import qr from 'qrcode'

let route = useRoute()
let router = useRouter()
// console.log(route.query);
let { orderId } = route.query
console.log(orderId);
let msg = ref()
let times = null
let qrUrl = ref()
let loading = ref(false)
let getOrder = async () => {
    loading.value = true
    try {
        let res = await api.getOrderApi(orderId)
        console.log(res);
        let { order_status } = res.data.data
        msg.value = res.data.data
        if (order_status !== 1) {
            switch (order_status) {
                case 0:
                    ElMessage.error('订单未提交,5秒后退回充值页面')
                    break;
                case 2:
                    ElMessage.error('订单已取消,5秒后退回充值页面')
                    break;
                case 3:
                    ElMessage.error('无效订单,5秒后退回充值页面')
                    break;
                case 4:
                    ElMessage.error('交易已关闭,5秒后退回充值页面')
                    break;
                case 5:
                    ElMessage.error('退货,5秒后退回充值页面')
                    break;
            }
            times = setTimeout(() => {
                router.push('/vip/money')
            }, 5000)
        } else {
            let code_url = localStorage.getItem(orderId)
            if (code_url) {
                //这个订单已经发起过支付，可能用户还没有支付，就从本地拿取
                console.log(code_url);
                //使用qrcode将支付地址变为二维码
                qr.toDataURL(code_url, (err, url) => {

                    if (err) {
                        ElMessage.error(err.toString())
                        return
                    }
                    qrUrl.value = url
                })
                loading.value = false
            } else {
                try {
                    let res = await api.paymentApi(orderId)
                    console.log(res);
                    localStorage.setItem(orderId, res.data.code_url)
                    qr.toDataURL(res.data.code_url, (err, url) => {
                        if (err) {
                            ElMessage.error(err.toString())
                            return
                        }
                        qrUrl.value = url
                    })
                    loading.value = false
                } catch (e) {
                    console.log(e);
                }
            }
        }
    } catch (e) {

    }
}
getOrder()
//轮询：设定一个定时器，间隔性的发送请求,询问服务器，数据是否变化
let poling = () => {
    let interval = setInterval(async () => {
        let res = await api.orderStatus(orderId)
            console.log(res.state);
            if(res.data.state){
                localStorage.removeItem(orderId)
                router.push('/pay/paysuccess')
            }
    }, 3000)
    return interval
}
let interval = poling()
onUnmounted(() => {
    clearTimeout(times)
    clearInterval(interval)
})
</script>
<style lang="scss" scoped>
.top {
    display: flex;
    padding-bottom: 20px;
}

.small {
    display: flex;
    background-color: aqua;
}

.a {
    margin-left: 20px;
}

.b {
    margin-left: 10px;
}

.logo {
    margin-left: 30px;
    margin-right: 80px;
}

.erweima {
    margin-left: 50px;
}

.iphon {
    margin-left: 100px;
}

.title {
    display: flex;
    justify-content: space-between;
}

.pay {
    margin-top: 30px;
}
</style>